import React from 'react';
import { useSelector } from 'react-redux';
import './theme.scss'

const Theme = React.memo(function Theme(porps) {
    const reduxData = useSelector(state => {
        return state.Appearance
    })
    // console.log('porps', porps)
    return (
        <div className='Span' style={{
            color: porps.color || (reduxData.theme == 'dark' ? 'rgba(255, 255, 255, 0.8)' : '#000000')
        }}>
            {
                React.Children.map(porps.children, (child) => {
                    // 注意：React.Children.map用于处理children，因为children可能是一个数组或者单个元素  
                    // return React.cloneElement(child, { className: 'processed-child' });  
                    return React.cloneElement(child);
                })
            }
        </div>
    );
})
export default Theme;